// components/tree/tree.js
// components/home/gauge/gauge.js
import * as echarts from '../ec-canvas/echarts';
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    options: {
      type: Object,
      value: {}
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      // onInit: initChart,
      lazyLoad: true, // 懒加载
    }
  },

  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
      this.initchart(this.data.options)
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
    this.initchart(this.data.options)
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },

  /**
   * 数据监听器
   */
  observers: {
    'options': function(val){
      console.log(val);
      this.initchart(val)
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    loadchart(data){
      // 绑定组件（ec-canvas标签的id）
      let ec_canvas = this.selectComponent('#mychart-dom-gauge');
      ec_canvas.init((canvas,width,height,dpr)=>{
        const chart =echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // 解决模糊显示的问题
        })
        var option = {
          series: [{
            type: 'tree',
            orient: 'RL',
            initialTreeDepth: -1,
            name: data.treeName,
            data: [data],
            expandAndCollapse: false, //不收缩设置
            top: '5%',
            left: '20%',
            bottom: '10%',
            right: '15%',
            symbolSize: 20,
            symbol: 'roundRect',
            animation: false,
            label: {
              // width: 40,
              // overflow: 'truncate',
              position: 'bottom',
              distance: 20,
              verticalAlign: 'middle',
              align: 'center',
              color: 'black',
            },
            
          }]
        };
        chart.setOption(option);
        chart.on('click', (params) => {
          // console.log(params);
          const seriesName = params.seriesName
          // 获取点击节点的名称
          const nodeName = params.data.name;
          // 获取点击节点的完整数据对象
          const nodeData = params.data;
          // 获取点击节点的子节点信息
          const children = params.data.children;
          // 在这里可以根据获取到的信息进行相应的操作，如显示节点详细信息、跳转到其他页面等
          console.log('点击了节点：' + nodeName);
          console.log(nodeData.traceabilityEvents);
          this.triggerEvent('clickItem', {seriesName, name: nodeName, itemTraceabilityEvents: nodeData.traceabilityEvents})
      });
        return chart;
      })
    },
    initchart(data){
      // 传递后台数据到图表中，进行懒加载图表
      this.loadchart(data);
    },
  }
})
